<!-- 收货地址 -->
<template>
    <view class="addressListpage">
        <view class="listBox">
            <!-- 地址卡片 -->
            <addressItem
                v-for="(item, index) in addresses"
                :key="index"
                :item="item"
                @editAddress="editAddress"
				@changeDefault="getAddressList"
            />
        </view>

        <!-- 底部添加按钮 -->
        <view class="addBtn" @tap="addNewAddress">
            <u-icon name="plus-circle-fill" color="#FFFFFF" size="48rpx"/>
            <text class="add">
                添加地址
            </text>
        </view>
    </view>
</template>

<script>
    import { addressItem } from "./components/addressItem.vue"
    export default {
        components: {
            addressItem
        },
        data() {
            return {
                addresses: [{
                        name: '张雨晴',
                        phone: '190 8987 8987',
                        address: '贵州省遵义市苗族自治县落龙镇5幢172室',
                        isDefault: true
                    },
                    {
                        name: '陈思远',
                        phone: '190 8987 8987',
                        address: '天津市天津市河东区鲁山道街道10单元66室',
                        isDefault: false
                    },
                    {
                        name: '李明浩',
                        phone: '190 8987 8987',
                        address: '河南省三门峡市义马市千秋路街道7幢119室',
                        isDefault: false
                    }
                ]
            }
        },
		onShow() {
			this.getAddressList()
		},
        methods: {
			getAddressList() {
				// 获取地址列表
			},
            setDefault(index) {
                this.addresses.forEach((address, idx) => {
                    address.isDefault = idx === index
                })
            },
            addNewAddress() {
                uni.navigateTo({
                    url: '/pages/address/creatAddress'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .addressListpage {
        height: 100vh;
        flex-direction: column;
        background-color: $uni-bg-color-grey;
        .listBox {
            padding: 0 30rpx;
        }
        
        .addBtn {
            height: 98rpx;
            margin: 140rpx 30rpx 100rpx;
            border-radius: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: $uni-bg-color-btn;
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 32rpx;
            color: $uni-text-color-inverse;
            .add {
                margin-left: 20rpx;
            }
        }
    }
</style>